import { h, VNode } from 'vue';
import { ElButton } from 'element-plus';
// 对话框配置类
export interface DialogOption {
  visible: boolean; // 是否可见
  width?: string | number; // 对话框宽度
  title: string; // 对话框标题
  slot: {
    default: () => VNode | string; // 默认模板
    footer?: () => VNode | string; // 底部的按钮模板
  };
}
export enum FooterButtonType {
  ok,
  cancel
}
// 按钮组配置类
export interface FooterButtonOption {
  label: string;
  buttonType: '' | 'default' | 'primary' | 'success' | 'warning' | 'info' | 'danger' | 'text';
  type: FooterButtonType;
  action: Function;
}
declare type CreateFooterButton = <T>(formData: T, config: FooterButtonOption, dialogOption: DialogOption) => VNode

const createOkButton: CreateFooterButton = (formData, config, dialogOption) => {
  return <ElButton type={config.buttonType} onClick={e => config.action(formData, dialogOption)}></ElButton>;
};
const createCancelButton: CreateFooterButton = (formData, config, dialogOption) => {
  return <ElButton type={config.buttonType} onClick={e => config.action(dialogOption)}></ElButton>;
};
const footerButtonCreatorMap:{[key in FooterButtonType]: CreateFooterButton} = {
  [FooterButtonType.ok]: createOkButton,
  [FooterButtonType.cancel]: createCancelButton
};
export const createDialogFooterFromConfig = (formData: any, config: FooterButtonOption, dialogOption: DialogOption):VNode => {
  return footerButtonCreatorMap[config.type](formData, config, dialogOption);
};
export const createDialogFooterFromConfigList = (formData: any, config: FooterButtonOption[], dialogOption: DialogOption): VNode[] => {
  return config.map(item => createDialogFooterFromConfig(formData, item, dialogOption));
};
